import { ForwardedRef, forwardRef } from 'react';
import { Tabs } from 'antd';
import {observer} from '@formily/react'
import SearchResultContent from './content';
import useConfigs, { IConfigs, ISearchResultMainRef } from '../../common/useConfigs';
import { getMessage } from '@inbiz/react';

const { TabPane } = Tabs;
function SearchResultMain(props: IConfigs) {

  const { showConfigs, searchEngineData, activeKey, $activeKey, refs } = useConfigs(props, props.ref);
  if (!showConfigs?.length) {
    return null;
  }
  
  return showConfigs.length === 1 ? (
    <SearchResultContent
      option={showConfigs[0]}
      engineProps={props.engineProps}
      searchEngineData={searchEngineData[showConfigs[0]?.IndexName] || {}}
      ref={refs[showConfigs[0]?.IndexName]}
      activeKey={activeKey}
      $searchKeyword={props.$searchKeyword}
    />
  ) : (
    <Tabs activeKey={activeKey} onChange={(key) => {
      props.engineProps.emit?.('onTabsChange', key);
      $activeKey(key)
    }}>
      {showConfigs.map((item, index) => {

        return item.IndexName ? (
          <TabPane
            key={item.IndexName}
            tab={
              item.IndexDesc === 'document' ? getMessage('SearchResultEngine.document') 
              : getMessage(item.configs?.[0].indexName) || getMessage(item.configs?.[0].title) 
            }
          >
            <SearchResultContent
              option={item}
              engineProps={props.engineProps}
              searchEngineData={searchEngineData[item.IndexName] || {}}
              ref={refs[item.IndexName]}
              activeKey={activeKey}
              $searchKeyword={props.$searchKeyword}
            />
          </TabPane>
        ) : null;
      })}
    </Tabs>
  );
}
export default observer(SearchResultMain, {forwardRef: true});
